<template>
  <div class="app-container">
    <!-- search -->
    <el-row :gutter="10">
      <!-- right -->
      <el-col :span="24">
        <!-- searchButton -->
        <el-row class="mb10">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="onSearch"
            >搜索</el-button
          >
          <el-button type="primary" size="mini">保存模板</el-button>
          <el-button type="primary" size="mini">发送模板</el-button>
        </el-row>
        <!-- 显示图片区域 -->
        <el-card class="mb10"></el-card>
        <!-- 功能配置 -->
        <div>
          <!-- 模板操作 -->
          <el-form
            :model="objectForm"
            inline
            ref="objectForm"
            label-width="80px"
            class="bg"
            size="mini"
          >
            <fieldset>
              <legend>模板操作</legend>
              <el-row>
                <!-- 宽度 -->
                <el-col :span="8">
                  <el-form-item label="宽度:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 播放时间 -->
                <el-col :span="8">
                  <el-form-item label="播放时间:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 刷屏模式 -->
                <el-col :span="8">
                  <el-form-item label="刷屏模式:">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      style="width:200px"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 高度 -->
                <el-col :span="8">
                  <el-form-item label="高度:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 模拟ID -->
                <el-col :span="8">
                  <el-form-item label="模拟ID:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 开机播放 一直播放 -->
                <el-col :span="8" class="pl10">
                  <el-form-item>
                    <el-checkbox></el-checkbox>&nbsp;开机播放
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox></el-checkbox>&nbsp;一直播放
                  </el-form-item>
                </el-col>
              </el-row>
            </fieldset>
          </el-form>
          <!-- 对象操作 -->
          <el-form
            :model="objectForm"
            inline
            ref="objectForm"
            label-width="80px"
            class="bg"
            size="mini"
          >
            <fieldset>
              <legend style="background-color:#1890ff;border-radius:10px">
                对象操作
              </legend>
              <!-- button -->
              <el-form-item style="display:flex;justify-content:center">
                <el-button type="primary" icon="el-icon-plus"
                  >添加对象</el-button
                >
                <el-button type="danger" icon="el-icon-delete"
                  >删除对象</el-button
                >
              </el-form-item>
              <el-row>
                <!-- 宽度 -->
                <el-col :span="8">
                  <el-form-item label="宽度:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 名称 -->
                <el-col :span="8">
                  <el-form-item label="名称:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 字体颜色 -->
                <el-col :span="8">
                  <el-form-item label="字体颜色:">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      style="width:200px"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 高度 -->
                <el-col :span="8">
                  <el-form-item label="高度:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 对象ID -->
                <el-col :span="8">
                  <el-form-item label="对象ID:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 字体大小 -->
                <el-col :span="8">
                  <el-form-item label="字体大小:">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 上边距 -->
                <el-col :span="8">
                  <el-form-item label="上边距:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 素材ID -->
                <el-col :span="8">
                  <el-form-item label="素材ID:">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <!-- 进入方式 -->
                <el-col :span="8">
                  <el-form-item label="进入方式:">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 左边距 -->
                <el-col :span="8">
                  <el-form-item label="左边距:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <!-- 对象类型 -->
                <el-col :span="8">
                  <el-form-item label="对象类型:">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <!-- 进入速度 -->
                <el-col :span="8">
                  <el-form-item label="进入速度:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 是否显示边框 -->
                <el-col :span="8">
                  <el-form-item style="margin-left:180px">
                    <el-checkbox></el-checkbox>&nbsp;是否显示边框
                  </el-form-item>
                </el-col>
                <!-- 边框颜色 -->
                <el-col :span="8">
                  <el-form-item label="边框颜色:">
                    <el-select
                      v-model="value"
                      placeholder="请选择"
                      class="select_width"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 停留时间 -->
                <el-col :span="8">
                  <el-form-item label="停留时间:">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 内容 -->
              <el-input
                placeholder="输入内容"
                type="textarea"
                style="padding:10px"
                :rows="3"
                resize="none"
                v-model="objectForm.textarea"
              ></el-input>
            </fieldset>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { treeselect } from '@/api/system/dept' // 导入Tree树形Api
import Treeselect from '@riophae/vue-treeselect' // 导入Tree树形组件
import { objList } from '@/api/templateManage/object/data' //import request api
export default {
  name: 'objectModel',
  components: {
    Treeselect
  },
  data () {
    return {
      deptName: undefined, // 搜索卡组
      deptOptions: undefined, // 公交站台树选项
      queryParams: {
        deptId: undefined, // 部门Id
        pageNum: 1, // 页码
        pageSize: 20 // 条数
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      // 模板操作模型
      palyForm: {
        checked: ''
      },
      // 对象操作模型
      objectForm: {
        textarea: ''
      },
      options: [
        // 刷屏模式
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  },
  methods: {
    // 筛选节点
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击获得相应的数据
    handleNodeClick (data) {
      // window.console.log(data)
      this.deptId = data.id // 把点击获得的id赋值给模型id
    },
    // 查询部门下拉树结构api
    getTreeselect () {
      treeselect().then(response => {
        this.deptOptions = response.data
        this.queryParams.deptId = response.data[0].id // 表格模型id
      })
    },
    // search
    onSearch () {
      window.console.log('111111111111')
    },
    // 查询模板列表
    objectList () {}
  },
  created () {
    // 获取查询部门下拉树结构数据
    this.getTreeselect()
  },
  mounted () {},
  watch: {
    // 根据名称筛选部门树
    deptName (val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  .bg {
    background-color: #c0c4cc;
  }
}
</style>
